/* eslint-disable*/
import React from 'react';
import _ from 'lodash';
import { Select as AntdSelect } from 'antd';

const { Option } = AntdSelect;

export default (props: any) => {
  const {
    placeholder = '请选择',
    options = [],
    value,
    isError = false,
    width = '312px',
    style = {},
    ...otherProps
  } = props;

  let arr: any[];
  if (!Array.isArray(options)) {
    arr = _.map(options, (value: any, prop: any) => {
      return { id: `${prop}`, label: value };
    });
  } else {
    arr = options.map(item => {
      const { id, label } = item;
      return { id: `${id}`, label: label };
    });
  }

  const selectProps = { value };

  if (typeof value !== 'undefined') {
    Object.assign(selectProps, {
      value: Array.isArray(value) ? value : `${value}`
    });
  }
  return (
    <div
      style={{
        width: width,
        ...style
      }}
    >
      <AntdSelect
        dropdownClassName="select-dropdown-custom"
        allowClear={true}
        dropdownMatchSelectWidth
        placeholder={placeholder}
        showSearch
        filterOption={(input: any, option: any) =>
          option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
        }
        // suffixIcon={<CaretDownOutlined style={{ color: '#7E7E99' }} />}
        style={{
          ...style,
          width: '100%'
        }}
        {...selectProps}
        {...otherProps}
      >
        {arr?.map(
          (item: { id: string | number; label: string }, index: number) => {
            return (
              <Option value={item.id} key={index}>
                {item.label}
              </Option>
            );
          }
        )}
      </AntdSelect>
    </div>
  );
};